<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品订单</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>
        let goodsid = window.localStorage.getItem("goodsid")

        $(function (){
            let now = new Date()
            $("#year").val(now.getFullYear())
            $("#year").attr("max", now.getFullYear())
            $("#month").val(now.getMonth()+1)
            let pages = 1
            let current = 0
            let orders = null

            function setBtn(){
                $(".btnSend").each(function (){
                    $(this).click(function (){
                        $.ajax({
                            url: "/order/send",
                            type: "post",
                            data: JSON.stringify({
                                "id": $(this).attr("value")
                            }),
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if(r.code===1){
                                    getPage(1)
                                    getDetail()
                                    alert(r.data)
                                }
                                else{
                                    alert(r.msg)
                                }
                            }
                        })
                    })
                })
            }

            function getPage(pageNum){
                if(pageNum<=0){
                    return
                }

                let table = $("#orderTable")
                table.empty()
                orders = null

                $.ajax({
                        url: "/order/pageForGoods",
                        type: "post",
                        data: JSON.stringify({
                            "pageNum": pageNum,
                            "goodsid": goodsid,
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {

                                pages = r.data.pages
                                $("#pageNum").attr("max", pages)

                                current = r.data.current
                                if(pages<=0||pageNum>pages){
                                    current=0
                                }

                                $("#pageNum").val(current)

                                orders = r.data.records
                                if(current<=1){
                                    $("#btnLast").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnLast").parent("li").removeClass("disabled")
                                }

                                if(current>=pages){
                                    $("#btnNext").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnNext").parent("li").removeClass("disabled")
                                }

                                for (let i = 0; i < orders.length; i++) {
                                    let order = orders[i]
                                    let stat = "未付款"
                                    if(order.stat == 1){
                                        stat = "未发货"
                                    }
                                    else if(order.stat==2){
                                        stat = "已完成"
                                    }
                                    else if(order.stat==3){
                                        stat = "申诉中"
                                    }

                                    table.append(
                                        "<tr>"+
                                        "<td><label>共" + (order.price/100.0)*order.count+ "元<label/></td>"+
                                        "<td><label>" + order.count+ "件<label/></td>"+
                                        "<td><label>" + order.address+ "<label/></td>"+
                                        "<td><label>" + order.email+ "<label/></td>"+
                                        "<td><label>" + stat + "<label/></td>"+
                                        "<td>" +
                                        "<button class='btnSend' value='" + order.id + "'>发货</button>" +
                                        "</td>"+
                                        "</tr>"
                                    )
                                }

                                setBtn()

                                $("#labelPage").text("     共 "+pages+" 页，当前第 "+current+" 页，跳转到")
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnOrder").click(
                function (){
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                    $("#recordBox").hide()
                    $("#recordContainer").hide()
                    $("#orderBox").show()
                    $("#btnBox").find("button").removeClass("active")
                    $(this).addClass("active")
                }
            )

            $("#btnLast").click(
                function (){
                    getPage(current-1)
                }
            )

            $("#btnNext").click(
                function (){
                    getPage(current+1)
                }
            )

            $("#btnPage").click(
                function (){
                    getPage($("#pageNum").val())
                }
            )

            getDetail()
            getPage(1)
            $("#recordBox").hide()
            $("#recordContainer").hide()
            $("#orderBox").show()

            function getDetail(){
                $.ajax({
                    url: "/goods/details",
                    type: "post",
                    data: JSON.stringify({
                        "id": goodsid
                    }),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        let r = data;
                        if(r.code===1){
                            let goods = r.data
                            $("#goodsBasic").text("商品名："+goods.name+" | 未处理订单："+goods.unsend+" | 销量："
                                +goods.sold+" | 库存："+goods.count)
                        }
                        else{
                            alert(r.msg)
                        }
                    }
                })
            }


            //展示浏览记录
            let pages_record = 1
            let current_record = 0
            let records = null
            let type = 0//默认查询浏览数

            function getRecordPage(pageNum){

                if(pageNum<=0||pageNum>pages_record){
                    return
                }
                let table = $("#recordTable")
                table.empty()
                records = null

                $.ajax({
                        url: "/goods/recordPage",
                        type: "post",
                        data: JSON.stringify({
                            "pageNum": pageNum,
                            "goodsid": goodsid,
                            "type": type
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {

                                pages_record = r.data.pages
                                $("#recordPageNum").attr("max", pages_record)

                                current_record = r.data.current
                                if(pages_record<=0){
                                    current_record=0
                                }

                                $("#recordPageNum").val(current_record)

                                records = r.data.records
                                if(current_record<=1){
                                    $("#btnLastRecord").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnLastRecord").parent("li").removeClass("disabled")
                                }

                                if(current_record>=pages_record){
                                    $("#btnNextRecord").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnNextRecord").parent("li").removeClass("disabled")
                                }

                                for (let i = 0; i < records.length; i++) {
                                    let record = records[i]
                                    let strShow = record.count + "件"
                                    if(type<1){
                                        strShow = record.time + "秒"
                                    }

                                    table.append(
                                        "<tr>"+
                                        "<td><label>" + record.date+ "<label/></td>"+
                                        "<td><label>" + record.userid+ "<label/></td>"+
                                        "<td><label>" + strShow+ "<label/></td>"+
                                        "</tr>"
                                    )
                                }
                                $("#type").text("购买件数")
                                if(type<1){
                                    $("#type").text("浏览时间")
                                }

                                $("#labelPageRecord").text("     共 "+pages_record+" 页，当前第 "+current_record+" 页，跳转到")
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnLastRecord").click(
                function (){
                    getRecordPage(current_record-1)
                }
            )

            $("#btnNextRecord").click(
                function (){
                    getRecordPage(current_record+1)
                }
            )

            $("#btnPageRecord").click(
                function (){
                    getRecordPage($("#recordPageNum").val())
                }
            )

            $("#btnSoldRecord").click(
                function (){
                    type = 1
                    $("#recordType").text("购买记录")
                    if(pages_record==0){
                        pages_record=1
                    }
                    getRecordPage(1)
                    $("#recordBox").show()
                    $("#recordContainer").hide()
                    $("#orderBox").hide()
                    $("#btnBox").find("button").removeClass("active")
                    $(this).addClass("active")
                }
            )

            $("#btnBroRecord").click(
                function (){
                    type = 0
                    $("#recordType").text("浏览记录")
                    if(pages_record==0){
                        pages_record=1
                    }
                    getRecordPage(1)
                    $("#recordBox").show()
                    $("#recordContainer").hide()
                    $("#orderBox").hide()
                    $("#btnBox").find("button").removeClass("active")
                    $(this).addClass("active")
                }
            )

            $("#btnGetSum").click(
                function (){
                    $.ajax({
                        url: "/goods/sumTime",
                        type: "post",
                        data: JSON.stringify({
                            "goodsid":goodsid,
                            "date":$("#year").val()+"-01-01T00:00"
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {
                                let sum = r.data
                                let sum_count = []
                                let sum_time = []

                                for(let i=0; i<sum.length; i++){
                                    sum_count.push(sum[i].count)
                                    sum_time.push(sum[i].time/60)
                                }
                                $("#monthLabel").text("该年共售出"+eval(sum_count.join("+")).toFixed(2)+"件，商品共被浏览"+
                                    eval(sum_time.join("+")).toFixed(2)+"分钟")
                                for(let i=0; i<sum.length; i++){
                                    sum_time[i] = (sum[i].time/60).toFixed(2)
                                }

                                //设置表格

                                var chartDom = document.getElementById('recordContainer');
                                var myChart = echarts.init(chartDom);
                                var option;

                                option = {
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    toolbox: {
                                        feature: {
                                            saveAsImage: {}
                                        }
                                    },
                                    xAxis: {
                                        type: 'category',
                                        data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
                                    },
                                    yAxis: [
                                        {
                                            type: 'value',
                                            axisLabel: {
                                                formatter: '{value}分钟'
                                            },
                                            //轴线
                                            axisLine: {
                                                show: true
                                            },
                                            //分割线
                                            splitLine: {
                                                show: false
                                            }
                                        },
                                        {
                                            type: 'value',
                                            axisLabel: {
                                                formatter: '{value}件'
                                            },
                                            //轴线
                                            axisLine: {
                                                show: true
                                            },
                                            //分割线
                                            splitLine: {
                                                show: false
                                            }
                                        }
                                    ],
                                    series: [
                                        {
                                            name:"浏览时间",
                                            data: sum_time,
                                            type: 'line',
                                            smooth: true,
                                            yAxisIndex: 0
                                        },
                                        {
                                            name:"销量",
                                            data: sum_count,
                                            type: 'line',
                                            yAxisIndex: 1,
                                            smooth: true
                                        }
                                    ],
                                    legend: {
                                        orient: 'horizontal',  //布局方式：  horizontal/vertical
                                        x: 'center', // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
                                        y: 'top',  //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
                                        itemGap: 10,
                                        textStyle: { // 图例文字大小颜色
                                            fontSize: 12,
                                            color: '#000'
                                        },
                                        data:['浏览时间','销量'],
                                        borderColor: '#abc',       // 图例边框颜色
                                        borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
                                        padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
                                        itemWidth: 20,             // 图例图形宽度
                                        itemHeight: 14,            // 图例图形高度
                                    }
                                };

                                option && myChart.setOption(option);

                            }
                            else{
                                alert(r.msg)
                            }
                        }
                    })

                    $("#recordBox").hide()
                    $("#recordContainer").show()
                    $("#orderBox").hide()
                    $("#btnBox").find("button").removeClass("active")
                    $(this).addClass("active")
                }
            )

            $("input").attr("autocomplete", "off")
        })
    </script>
</head>
<body>

    <div class="page-header">
        <h3 id="goodsBasic"></h3>
    </div>
    <div class="btn-toolbar" id="btnBox">
        <div class="btn-group">
            <button id="btnOrder" class="btn btn-default active">所有订单</button>
            <button id="btnSoldRecord" class="btn btn-default">购买记录</button>
            <button id="btnBroRecord" class="btn btn-default">浏览记录</button>
        </div>
        <div class="input-group" style="width: 20%">
            <span class="input-group-addon">查看</span>
            <input id="year" value="2023" min="2009" max="2999" step="1" type="number" class="form-control">
            <span class="input-group-addon">年的统计</span>
        </div>
        <button id="btnGetSum" class="btn btn-default">开始统计</button>
    </div>

    <div id="recordContainer" style="height:500px; width:1000px" hidden></div>
    <div id="orderBox" class="table-responsive" hidden>
        <div class="dropdown-header">
            <h5>
                所有订单
            </h5>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>总价</td>
                    <td>个数</td>
                    <td>收货地址</td>
                    <td>邮箱</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="orderTable">

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="orderPage">
                <li>
                    <a aria-label="Previous" id="btnLast">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNext">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="pageNum" id="labelPage"></label>
                    <input type="number" id="pageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPage">跳转</button>
                </li>
            </ul>
        </nav>
    </div>
    <div id="recordBox" hidden>
        <div class="dropdown-header">
            <h5 id="recordType">

            </h5>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>时间</td>
                <td>用户id</td>
                <td id="type">停留时间</td>
            </tr>
            </thead>
            <tbody id="recordTable">

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="recordPage">
                <li>
                    <a aria-label="Previous" id="btnLastRecord">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNextRecord">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="recordPageNum" id="labelPageRecord"></label>
                    <input type="number" id="recordPageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPageRecord">跳转</button>
                </li>
            </ul>
        </nav>
    </div>

</body>
</html>